<template>
  <div class="home-container container" v-loading="isLoading">
    <div class="header">
      <h1>文章</h1>
      <el-button
        type="primary"
        size="medium"
        @click="linkTo"
      >
        创建文章
        <i class="el-icon-circle-plus-outline"></i>
      </el-button>
    </div>
    <div v-if="article_list.length === 0" class="">
      数据为空！！！
    </div>
    <ul v-else>
      <li v-for="(item, index) in article_list" :key="index">
        <router-link :to="{ name: 'article', params: { id: item.id } }" class="title">
          {{item.title}}
        </router-link>
        <div class="desc">{{item.description}}</div>
      </li>
    </ul>
    <!--<h1>{{ $store.state.count }}</h1>
    <el-button @click="onChange">+</el-button>-->
  </div>
</template>

<script>
import http from 'axios'
import {mapState, mapGetters, mapActions} from 'vuex'

export default {
  name: 'home',
  data() {
    return {
      isLoading: false
    }
  },
  computed: {
    ...mapState('homeModule', ['article_list']),
    ...mapState('showModule', ['showData']),
    ...mapGetters(['getGlobalData']),
  },
  mounted() {
    console.log(this.showData)
    console.log(this.getGlobalData)
  },
  async created() {
    try {
      this.isLoading = true

      this.getArticles({
        _limit: 2
      })

      // this.$store.dispatch('getArticles', {_limit: 2})
    } catch (e) {
      this.$notify.error({
        title: '错误',
        message: '网络错误！！！'
      });
    } finally {
      this.isLoading = false
    }
  },
  methods: {
    ...mapActions('homeModule', ['getArticles']),
    onChange() {
      this.$store.commit('increment')
    },
    linkTo() {
      this.$router.push({
        name: 'article-create'
      })
    }
  }
}
</script>

<!-- scoped：作用域 -->
<style lang="scss" scoped>
.home-container {
  .header {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  }

  li {
    height: 100px;
    list-style: none;

    .title {
      font-size: 30px;
      font-weight: bold;
      line-height: 50px;
      text-decoration: none;
      color: #333;

      &:hover {
        color: aqua;
        text-decoration: underline;
      }
    }

    .desc {
      font-size: 16px;
      line-height: 25px;
    }
  }
}
</style>

